<!-- 商品详情页 商品图片轮播组件 -->
<template>
  <van-swipe :show-indicators="showInd" indicator-color="white" :autoplay="autoplay" :style="{ height: fun.getPhoneEnv() == 3 && !banner ? '375px' : banner?'':'100vw' }" ref="swipe">
    <van-swipe-item v-if="!fun.isTextEmpty(goods_video)">
      <video
        ref="goods_vedio"
        id="goods_vedio"
        style="width: 100%; height: 100%; object-fit: scale-down;"
        :poster="video_image"
        :src="goods_video"
        @ended="ended"
        @pause="pause"
        @play="play"
        controls
        webkit-playsinline="true"
        playsinline="true"
        x5-playsinline="true"
        x-webkit-airplay="true"
        x5-video-ignore-metadata="true"
        width="100%"
        height="100%"
      >
        <source :src="goods_video" />
      </video>
    </van-swipe-item>
    <!-- 供应商其他图片为空的时候返回的是空数组 -->
    <van-swipe-item v-if="!thumb_url || thumb_url == null || thumb_url.length == 0" @click="handleClick">
      <img :src="thumb" width="100%" />
    </van-swipe-item>
    <van-swipe-item v-for="(ithumb, index) in thumb_url" style="position: relative;" :key="index" @click="handleClick($event, ithumb)">
      <template v-if="ithumb && !banner">
        <img :src="ithumb" width="100%" />
        <div class="number-box">{{ index + 1 }} / {{ thumb_url.length }}</div>
      </template>
      <template v-if="ithumb && banner">
        <img :src="ithumb.thumb_src" alt="" width="100%" style="border-radius: 0.5rem" />
      </template>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  props: {
    thumb_url: {
      type: [Array, String],
      default: () => []
    },
    thumb: {
      type: String,
      default: null
    },
    goods_video: {
      type: String,
      default: ""
    },
    video_image: {
      type: String,
      default: ""
    },
    // 适用宽度固定，高度自适应的轮播
    banner: {
      type: Boolean,
      default: false
    },
    // 是否显示指示器
    showInd: {
      type: Boolean,
      default: false
    }
  },
  deactivated() {
    this.timeId = null;
  },
  data() {
    return {
      timeId: null,
      play_statue: true
    };
  },
  computed: {
    autoplay() {
      return this.play_statue ? '4000' : false;
    }
  },
  methods: {
    //播放结束
    ended() {
      this.play_statue = true;
    },
    //暂停()
    pause() {
      this.play_statue = true;
    },
    //开始播放
    play() {
      this.play_statue = false;
    },
    handleClick(event, item) {
      if (this.banner) {
        if (item.url) {
          window.location.href = item.url;
        }
        return;
      }
      if (this.thumb_url && this.thumb_url.length !== 0) {
        ImagePreview({ images: this.thumb_url, closeable: true });
      } else {
        ImagePreview({ images: [event.srcElement.currentSrc], closeable: true });
      }
    }
  },
  watch: {
    video_image() {
      this.timeId = setTimeout(() => {
        this.$refs.swipe.resize();
      }, 300);
    },
    thumb_url() {
      this.timeId = setTimeout(() => {
        this.$refs.swipe.resize();
      }, 300);
    },
    goods_video() {
      this.timeId = setTimeout(() => {
        this.$refs.swipe.resize();
      }, 300);
    },
    thumb() {
      this.timeId = setTimeout(() => {
        this.$refs.swipe.resize();
      }, 300);
    }
  }
};
</script>
<style lang="scss" scoped>
.number-box {
  position: absolute;
  right: 15px;
  bottom: 10px;
  font-size: 12px;
  padding: 4px 15px;
  color: #fff;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
